<template>
  <div class="header">
    <div class="header-in clearFix">
      <div class="logo clearFix">
        <img src="./logo_03.png" alt="logo" />
        <div class="flag-word">
          <strong>蓝莓派</strong>
          <h3>和音乐一起分享时光</h3>
        </div>
      </div>
      <div class="main-nav clearFix">
        <ul class="clearFix" id="nav">
          <li><a href="/" class="navs on" id="n_index">首页</a></li>
          <li><a href="/music" class="navs" id="n_yz">乐章</a></li>
          <li>
            <span id="ts-num">12</span
            ><a href="/listening" class="navs" id="n_ts">听说</a>
          </li>
          <li><a href="/pleasure" class="navs" id="n_yq">乐趣</a></li>
          <li><a href="/chatting" class="navs" id="n_ll">聊聊</a></li>
          <li><a href="/tour" class="navs" id="n_yj">游记</a></li>
          <li><a href="/photography" class="navs" id="n_sy">摄影</a></li>
          <li><a href="/eslite" class="navs" id="n_cp">诚品</a></li>
          <li><a href="/blueberry" class="navs" id="n_lmj">蓝莓酱</a></li>
          <li><a href="/community" class="navs" id="n_sq">社区</a></li>
        </ul>
      </div>
      <div class="login clearFix">
        <div class="search">
          <form action="">
            <input type="search" id="infinitySearch" />
            <label for="infinitySearch" id="search-button"></label>
          </form>
        </div>
        <div class="login-register" v-if="flag">
          <a href="/login" class="log" id="log">登录</a>
          <a href="/register" class="reg" id="reg">注册</a>
        </div>
        <div class="login-register" v-else>
          <p>{{username}}</p>
          <div class="account-info">
            <ul class="clearFix" id="usermenu" >
              <li><a href="/ucenter" class="a-info-details" id="a_tz">我的帖子</a></li>
              <li><a href="#" class="a-info-details" id="a_pl">我的评论</a></li>
              <li><a href="#" class="a-info-details" id="a_sc">我的收藏</a></li>
              <li><a href="#" class="a-info-details" id="a_sz">设置</a></li>
              <li>
                <a href="#" class="a-info-details" id="a_tc" @click="logout"
                  >退出</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="head-nav">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router
        >
            <el-menu-item index="/" class="item">首页</el-menu-item>
            <el-menu-item index="/music" class="item">乐章</el-menu-item>
            <el-menu-item index="/listening" class="item">听说</el-menu-item>
            <el-menu-item index="/pleasure" class="item">乐趣</el-menu-item>
            <el-menu-item index="/chatting" class="item">聊聊</el-menu-item>
            <el-menu-item index="/tour" class="item">游记</el-menu-item>
            <el-menu-item index="/photography" class="item">摄影</el-menu-item>
            <el-menu-item index="/eslite" class="item">诚品</el-menu-item>
            <el-menu-item index="/blueberry" class="item">蓝莓酱</el-menu-item>
            <el-menu-item index="/community" class="item">社区</el-menu-item>
            
           
            <div class="user">
                <router-link to="/login" tag="span" class="user-name">登录</router-link>
                <router-link to="/register" tag="span" class="user-name">注册</router-link>
            </div>
        </el-menu>
  </div> -->
</template>

<script>
export default {
  data() {
    return {
      username:'',
      flag: true,
    };
  },
  mounted() {
    if(JSON.parse(localStorage.getItem("username"))){
      this.username= JSON.parse(localStorage.getItem("username"));
      this.flag = false
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("username");
      this.flag=true
    },
  },
};
</script>

<style scoped lang="less">
/**
 * @Author:      geekarl
 * @DateTime:    2016-07-15 20:21:27
 * @Description: 底部公共部分的样式
 */
body {
  background: #fff;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  font-size: 14px;
}
.header {
  width: 100%;
  background: rgb(36, 41, 44);
  height: 90px;
  color: #fff;
}
.header .header-in {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  height: inherit;
  line-height: inherit;
}
/************************************logo  start ***************************************8*/
.header .header-in .logo {
  float: left;
  height: 90px;
}
.header .header-in .logo img {
  float: left;
  margin-top: 25px;
}
.header .header-in .logo .flag-word {
  float: left;
  margin: 22px 0 0 15px;
}
.header .header-in .logo .flag-word strong {
  font-size: 24px;
  letter-spacing: 13px;
  font-family: "幼圆";
}
.header .header-in .logo .flag-word strong::after {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  width: 100px;
  margin: 2px 0;
}
.header .header-in .logo .flag-word h3 {
  font-size: 11px;
  margin-left: -4px;
  font-family: "幼圆";
}

/***************************************logo  end ************************************/

/************************************主导航 start ************************************/
.header .header-in .main-nav {
  float: left;
  font-size: 16px;
  height: 90px;
  width: 610px;
  margin-left: 40px;
}
.header .header-in .main-nav .navs {
  float: left;
  position: relative;
}
.header .header-in .main-nav .navs:hover {
  color: #2ecc71;
}
.header .header-in .main-nav ul {
  margin-top: 33px;
}
/*所有导航类别公共样式*/
.header .header-in .main-nav li {
  position: relative;
}
.header .header-in .main-nav li a.navs {
  display: block;
  padding: 2px 9px;
  color: #fff;
  border-radius: 3px;
  margin-right: 9px;
}
/*听说后的数字圈*/
/*#nav-ts{*/
/*position:relative;*/
/*}*/
.main-nav ul li #ts-num {
  border-radius: 50%;
  /* width: 17px; */
  /* height: 17px; */
  font-size: 12px;
  background: #e8152d;
  color: #fff;
  position: absolute;
  top: -2px;
  left: 24.5%;
  text-align: center;
  z-index: 1000;
  padding: 0 1px 1px 0;
}
/*主导航栏当前按钮样式*/
.header .header-in .main-nav li a.navs.on {
  background: #109d59;
  color: #fff;
}
/*每个导航类别下面的三角*/
.header .header-in .main-nav li a.navs.on::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 35px;
  left: 15px;
  border-top: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #fff;
  border-left: 11px solid transparent;
}

/************************************主导航 end ************************************/

/************************************登录&注册  start ************************************/
.header .header-in .login {
  float: right;
  font-size: 14px;
  height: 90px;
  line-height: 90px;
}
/*搜索框*/
.header .header-in .login .search {
  float: left;
  position: relative;
}
.header .header-in .login .search #infinitySearch {
  width: 170px;
  height: 27px;
  background: #000;
  border: none;
  border-radius: 20px;
  padding-left: 15px;
  box-sizing: border-box;
  color: #16a085;
  font-size: 18px;
}
.header .header-in .login .search #search-button {
  position: absolute;
  top: 31px;
  right: 0;
  width: 30px;
  height: 27px;
  border-radius: 0 40px 40px 0;
  -webkit-transition: all 0.2s ease;
  line-height: 27px;
  text-align: center;
  margin-right: -2px;
  background: #2ecc71;
  cursor: pointer;
}
.header .header-in .login .search #search-button:hover {
  background: #2aa756;
}
/*登录和注册*/
.header .header-in .login .login-register {
  float: left;
  margin-left: 20px;
  word-spacing: 5px;
  position: relative;
}
.header .header-in .login .login-register a {
  color: #fff;
}
.header .header-in .login .login-register a:hover {
  color: #2ecc71;
}
/*登录和注册下面的三角*/
.header .header-in .login .login-register .triangle {
  display: none;
  width: 0;
  height: 0;
  position: absolute;
  top: 70px;
  left: 35px;
  border-top: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #fff;
  border-left: 11px solid transparent;
}
/*账户详情*/
.header .header-in .login .login-register .account-info {
  position: absolute;
  top: 90px;
  left: -52px;
  padding: 10px 0;
  z-index: 99990;
  width: 120px;
  background: #fff;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
  display: none;
}
.header .header-in .login .login-register .account-info .a-info-details {
  display: block;
  line-height: 30px;
  color: #3a3a3a;
  text-indent: 18px;
}
.header .header-in .login .login-register .account-info .a-info-details:hover {
  background: #eee;
}
.header .header-in .login .login-register:hover .account-info {
  display: block;
}
.header .header-in .login .login-register:hover .triangle {
  display: block;
}
#usermenu{
  color: #000;
  text-align: center;
  }

/************************************登录&注册  end ************************************/
</style>
